<%@page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>订单信息管理系统</title>

    <style type="text/css">

        td,th{
            text-align: center;
        }

        body
            {
                background-color:white;
            }
        span
            {
                float: left;
                margin-left: 50px;
                margin-top: 50px;
                width: 220px;
                height: 480px;
                border: 1px solid blue;
            }
        a:link
            {
                color:black;
                font-size: 30px;
                font-family: Arial;
            }
        a:hover
            {
                color: red;
            }
        a
            {
                margin-left: 20px;
            }
        .first
            {
                width: 1200px;
                height: 550px;
                border: 1px solid red;
                margin-left: 300px;
                margin-top: 34px;
                padding-left: 20px;
            }
        p
            {
                color: navy;
                font-size: 25px;
                font-family: Arial;
            }
    </style>

    <script>

        function fun(){
            alert("确定删除此条记录？");
        }

        function ischeck() {
            var statue = document.getElementById("uid");
            if (statue.checked) {
                alert("是否确定删除?");
            } else {
                alert("请选中记录再删除!");
            }
        }
        function getvalue() {
            let id=document.getElementById("id").value;
            let name=document.getElementById("name").value;
            alert(11);
            alert(id+name);

            location.href="/inquire?id="+id+"&name="+name;
        }

    </script>

</head>

<body>
    <h1 style="text-align:center;">超市订单管理系统 </h1>
    <div>

        <span>
            <br><br><a href="manage.jsp">订单管理</a><br><br><br><br>
            <a href="input.jsp">订单信息录入</a><br><br><br><br>
            <a href="modify.jsp">订单信息修改</a><br><br><br><br>
            <a href="history.jsp">历史订单</a><br>
        </span>
    </div>

<div class="first">

<div class="container">

    <h1 align="center">用户信息列表</h1>

    <div align="center">
        <form class="form-inline">

            <div class="form-group">
                <label>订单名字</label>
                <input type="text" id="name"  required pattern="^[\u4e00-\u9fa5]{2,15}$">
            </div>

            <div class="form-group">
                <label >订单ID</label>
                <input type="telephone" id="id" class="form-control" required pattern="^\d{7}$">
            </div>

            <div class="form-group">
                <label>状态</label>
                <select id="group" class="form-control" placeholder="请选择">
                    <option value="0" > 请选择 </option>
                    <option value="1"> Y </option>
                    <option value="2"> N </option>
              </select>
            </div>

            <button type="submit" class="btn btn-primary" onclick="getvalue()">查询</button>
            <button type="submit" class="btn btn-warning">重置</button>

        </form>
    </div>

    <div style="float: right; margin:5px">
        <a class="btn btn-primary" onclick="window.location.href = 'input.jsp'">添加</a>
        <a class="btn btn-danger" id="delSelected" onclick="ischeck();">批量删除</a>
    </div>

    <form id="form" method="post" action="input.jsp">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <td><input type="checkbox" id="check">全选</td>
                <th>订单ID</th>
                <th>订单名字</th>
                <th>价格</th>
                <th>时间</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>

                <body id="tb">

                <tr id="1st">
                    <td><input type="checkbox" name="uid" id="uid"></td>
                    <td>2020001</td>
                    <td>sweater</td>
                    <td>11</td>
                    <td>20200801</td>
                    <td>Y</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="window.location.href = 'modify.jsp'">修改</button>
                        <button type="button" class="btn btn-danger" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</button>
                    </td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="uid" id="uid"></td>
                    <td>2021001</td>
                    <td>Tom</td>
                    <td>12</td>
                    <td>20210801</td>
                    <td>Y</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="window.location.href = 'modify.jsp'">修改</button>
                        <button type="button" class="btn btn-danger"onclick="return fun()">删除</button>
                    </td>
                </tr>

                </body>
        </table>
    </form>
 
    <div align="center">

            <ul class="pagination">
                <li>
                    <a href="#">
                        &laquo;
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#">
                        &raquo;
                    </a>
                </li>
                <br>
                <br>
                <button class="btn  btn-info" type="submit">首页</button>
                
                <button class="btn  btn-info" type="submit">上页</button>
                
                <button class="btn  btn-info" type="submit">下页</button>
                
                <button class="btn  btn-info" type="submit">尾页</button>
                <br>
                <a style="font-size: 22px;margin-left:20px" >
                    共35条记录,共5页
                </a>
            </ul>
    </div>
</div>

</div>

</body>

    <script>
         document.getElementById("check").onclick = function(){
        var checked = document.getElementById("check").checked;
        var checkson = document.getElementsByName("uid");
        if(checked){
            for(var i = 0; i < checkson.length ;i++){
                checkson[i].checked = true;
            }
        }else{
            for(var i = 0; i < checkson.length ;i++){
                checkson[i].checked = false;
            }
        }
    }

    </script>
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //obj是点击行的this
        function deleteTr(obj) {
            //通过this找到父级元素节点
            var tr = obj.parentNode.parentNode;
            //找到表格
            var tbody = tr.parentNode;
            //删除行
            tbody.removeChild(tr);
            //只剩行首时删除表格
            if (tbody.rows.length == 1) {
                tbody.parentNode.removeChild(tbody);
            }
        }
    </script>

</html>